var scaling = 1;

// 点击图片放大
// $('.apply-list a').each(function () {
//     $(this).click(function () {
//         var _this = $(this).attr('href');    //将当前点击的图片元素作为_this传入函数
//         showBigImg('#outerbox', '#innerbox', '#bigimg', _this);
//         return false;
//     })
// })

function showBigImg(outerbox, innerbox, bigimg, src) {
    // var src = _this.attr('src');    //获取当前点击图片元素的src属性
    $(bigimg).attr('src', src);     //设置#bigimg元素的src属性值

    /* 获取当前点击图片的真实大小，并显示弹出层及大图 */
    $(bigimg).attr('src', src).load(function () {
        var windowW = $(window).width();    //获取当前窗口宽度
        var windowH = $(window).height();   //获取当前窗口高度
        var realW = this.width;     //获取图片真实宽度
        var realH = this.height;    //获取图片真实高度
        var imgW, imgH;
        var scale = 0.8;    //当图片的真实宽高大于窗口的宽高时要进行的缩放尺寸
        if (realH > windowH * scale) {    //判断图片高度
            imgH = windowH * scale;       //如大于窗口高度，图片高度进行缩放
            imgW = imgH / realH * realW;    //等比例缩放宽度
            if (imgW > windowW * scale) { //如宽度仍大于窗口宽度
                imgW = windowW * scale;   //再对宽度进行缩放
            }
        } else if (realW > windowW * scale) { //如图片高度合适，判断图片宽度
            imgW = windowW * scale;       //图片宽度进行缩放
            imgH = imgW / realW * realH;    //等比例缩放高度
        } else {    //如图片真实宽高都符合要求，宽高不变
            imgW = realW;
            imgH = realH;
        }
        $(bigimg).css('width', imgW);    //以最终的宽度对图片进行缩放
        var w = (windowW - imgW) / 2;   //计算图片与窗口的左右边距
        var h = (windowH - imgH) / 2;   //计算图片与窗口的上下边距
        $(innerbox).css({'top': h, 'left': w});
        $(outerbox).fadeIn('fast');     //淡入显示
        $('body').css('overflow-y', 'hidden');   //隐藏页面滚动条防止滚动缩放图片时影响页面滚动条位置

        // IE9, Chrome, Safari, Opera  -- 鼠标滚动监听
        $(bigimg).on("mousewheel", MouseWheelHandler);
        // Firefox  -- 鼠标滚动监听
        $(bigimg).on("DOMMouseScroll", MouseWheelHandler);
    })

    $(outerbox).click(function () {   //再次点击淡出消失弹窗
        $(this).fadeOut('fast');

        // 解绑 鼠标滚轮监听事件
        $('#bigimg').off("mousewheel");
        $('#bigimg').off("DOMMouseScroll");
        // 重置
        scaling = 1;
        $('#bigimg').css('transform', 'scale(1)');
        $('body').css('overflow-y', 'auto');
    })
}

// 鼠标滚轮放大缩小
function MouseWheelHandler(event) {
    var type = event.type;
    if (type == 'DOMMouseScroll' || type == 'mousewheel') {
        event.delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta / 120 : -(event.detail || 0) / 3;
    }

    if (event.delta == 1 || event.delta > 0) { //上滚 -- 放大
        zoomImg('#bigimg', 'add')
    } else if (event.delta == -1 || event.delta < 0) { //下滚 -- 缩小
        zoomImg('#bigimg', 'cut')
    } else {
        console.log("鼠标滚轮放大缩小状态获取失败")
    }
}

// 缩放图片比例
function zoomImg(img, type) {
    if (type == 'add') {
        scaling += 0.1;
    } else {
        if (scaling < 0.5) {   //控制图片缩小到一定大小
            return
        }
        scaling -= 0.1;
    }
    $(img).css('transform', `scale(${scaling})`);
}

;!function (win, doc) {

    var PKImg = function () {
    }, scaling = 1, domId = {
        boxImg: 'PKImg_box', innerBox: 'PKImg_innerBox', bigImg: 'PKImg_bigImg'
    }, init = function (fn) {
        var img_box = document.createElement('div');
        img_box.id = domId.boxImg;
        var img_innerBox = document.createElement('div');
        img_innerBox.id = domId.innerBox;
        var img_bigImg = document.createElement('img');
        img_bigImg.id = domId.bigImg;
        img_bigImg.src = '';
        img_innerBox.append(img_bigImg);
        img_box.append(img_innerBox);
        doc.body.append(img_box);
    };

    PKImg.prototype.preview = function (src) {
        if (!doc.getElementById(domId.boxImg)) {
            init(function () {
                showBigImg('#' + domId.boxImg, '#' + domId.innerBox, '#' + domId.bigImg, src);
            });
        } else {
            showBigImg('#' + domId.boxImg, '#' + domId.innerBox, '#' + domId.bigImg, src);
        }
    }

    win.PKImg = new PKImg();
}(window, document);